<template>
    <div class="container">
        <div>
            <el-form label-width="80px" class="demo-ruleForm" :inline="true">
                <el-form-item label="活动名称:">
                    <el-select v-model="value" placeholder="请选择" class="w3">
                        <el-option v-for="(item, index) in activity" :value="item.id" :key="index"
                                   :label="item.title" ref="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table
            :data="tableData"
            ref="multipleTable"
            tooltip-effect="dark"
            border
            style="width: 100%"
            class="table"
        >
            <el-table-column label="创建时间 " prop="createTime" :formatter="timeFormat" sortable
                             width="100"></el-table-column>
            <el-table-column label="题目名称 " prop="questionnaireName"></el-table-column>
            <el-table-column label="选项" prop="optionMessageList">
                <template slot-scope="scope">
                    <div>
                        <ul>
                            <li v-for="(item,index) in scope.row.optionMessageList" :key="index"
                                v-on:click="deleteItem(scope,index)">
                                {{ item.optionName }}<span style="cursor:default">&times;</span>
                            </li>
                        </ul>
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="正确选项 " prop="optionMessageList">
                <!-- correctAnswer -->
                <template slot-scope="scope">
                    <div>
                        <ul>
                            <li v-for="item in scope.row.optionMessageList">
                                <div v-if="item.correctAnswer == '1' ">{{item.optionName}}</div>
                            </li>
                        </ul>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="footer">
            <el-pagination @size-change="handleSizeChange" :page-size='pageSize' @current-change="handleCurrentChange"
                           :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
    import {parseTime} from "@/utils/index";

    export default {
        name: "dailyEdit",
        // props: ["json"],
        data() {
            return {
                tableData: [],
                pageSize: 10,
                pageNum: 0,
                total: 1,
                activity: [],
                value: '',
                id: '',
            };
        },
        mounted() {
            this.search(1);
            this.dataViewone();
        },
        methods: {
            dataViewone() {
                let that = this;
                that.axios.get('/activityConsole/activityMessage/getDailyActivityName', {})
                    .then(function (res) {
                        console.log(res);
                        if (res.data.status == "SUCCESS") {
                            that.activity = res.data.data;
                        }
                    }).catch(function (error) {
                    console.log(error);
                })
                    .then(function () {
                    });
            },
            search() {
                let that = this;
                console.log(this.value)
                that.axios({
                    url: '/activityConsole/activityMessage/getDailyMessage',
                    method: 'post',
                    params: {
                        activityInfoId: that.value,
                        pageNum: that.pageNum,
                        pageSize: that.pageSize
                    },
                })
                    .then(function (res) {
                        console.log(res);
                        if (res.status == "200") {
                            if (res.data.status == "200") {
                                that.tableData = res.data.data;
                                console.log(that.tableData);
                                that.total = parseInt(res.data.description);
                            }
                        }
                    }).catch(function (error) {
                    console.log(error);
                    that.$message({
                        type: 'error',
                        message: '查询失败'
                    });
                })
                    .then(function () {
                    });
            },
            deleteItem(scope, index, row) {
                console.log(scope)
                console.log(scope.row.optionMessageList)
                console.log(scope.row.id)
                console.log(index)
                //   scope.row.optionMessageList.splice(index,1);
                let that = this;
                that.axios({
                    url: '/activityConsole/activityMessage/delMessage',
                    method: 'post',
                    params: {
                        id: scope.row.id
                    },
                }).then(res => {
                    console.log(res);
                scope.row.optionMessageList.splice(index, 1);
                that.$message({
                    type: 'success',
                    message: res.data.description
                });
            }).
                catch(err => {
                    console.log(err);
                that.$message({
                    type: 'error',
                    message: err.data.description
                });
            })
                ;
            },
            handleSizeChange(val) {
                console.log(val)
            },
            handleCurrentChange(val) {
                console.log(val)
                this.pageNum = parseInt(val) - 1;
                this.search(this.pageNum);
            },
            handleDelete(index, row) {
                console.log('删除');
                console.log(row.id);
                let that = this;
                that.axios({
                    url: '/activityConsole/activityMessage/delMessage',
                    method: 'post',
                    params: {
                        type: 'questionnaire',
                        id: row.id
                    },
                }).then(res => {
                    console.log(res);
                let {tableData} = this;
                tableData = tableData.filter(item => row.id !== item.id
            )
                ;
                this.tableData = tableData;
                this.total--;
                that.$message({
                    type: 'success',
                    message: res.data.description
                });
            }).
                catch(err => {
                    console.log(err);
                that.$message({
                    type: 'error',
                    message: err.data.description
                });
            })
                ;
            },
            timeFormat(row, column) {
                const date = row[column.property];
                return parseTime(date);
            },
            init() {
                let that = this;
                that
                    .axios({
                        url: "/activityConsole/activityMessage/getDailyMessage",
                        method: "post",
                        params: {
                            pageNum: that.pageNum,
                            pageSize: that.pageSize
                        }
                    })
                    .then(res => {
                    console.log(res);
                if (res.status == "200") {
                    if (res.data.status == "200") {
                        that.tableData = res.data.data;
                        console.log(that.tableData);
                        that.total = parseInt(res.data.description);
                    }
                }
                that.$message({
                    type: "success",
                    message: res.data.description
                });
            })
            .
                catch(err => {
                    console.log(err);
                that.$message({
                    type: "error",
                    message: err.statusText
                });
            })
                ;
            }
        }
    };
</script>
<style scoped>
    html,
    body {
        width: 100%;
        height: 100%;
    }

    .container {
        width: 100%;
        height: 100%;
    }

    h3 {
        margin-bottom: 30px;
    }

    .header {
        width: 100%;
        height: 140px;
    }

    .content {
        width: 100%;
    }

    .footer {
        margin-top: 10px;
        text-align: center;
    }

    .btn1 {
        float: right;
        margin-right: 10px;
    }

    .el-button.btn1.el-button--default {
        background-color: #21baa9;
        color: #fff;
    }
</style>
